<template>
  <div class="container">
    <div class="page-title">门户管理</div>
    <div class="info-wrap">
      <div class="small-title">已认证门户</div>
      <el-table
        v-loading="loading"
        ref="multipleTable"
        :data="scholarList"
        tooltip-effect="dark"
        style="width: 100%"
        :cell-style="{ cursor: 'pointer' }"
        :header-cell-style="{ 'text-align': 'center' }"
        @row-click="to_scholar_profile"
      >
        <el-table-column prop="no" label="序" width="70" align="center">
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="120" align="center">
        </el-table-column>
        <el-table-column prop="org" label="机构" width="180" align="center">
        </el-table-column>
        <el-table-column
          prop="h_index"
          label="H指数"
          width="100"
          align="center"
        >
          <template slot-scope="scope">
            <div>
              {{ scope.row.h_index }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="n_pubs"
          label="成果数"
          width="100"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="n_citation"
          label="被引量"
          width="100"
          align="center"
        >
          <template slot-scope="scope">
            <div>
              {{ scope.row.n_citation }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="tag" label="标签" align="center">
          <template slot-scope="scope">
            <el-tag v-for="item in scope.row.tags" :key="item.id" size="mini">
              {{ item.t }}
            </el-tag>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="action" label="操作" width="120" align="center">
          <template slot-scope="scope">
            <div class="delete-role" @click="deleteRole(scope.row.no)">
              
            </div>
          </template>
        </el-table-column> -->
      </el-table>
    </div>
  </div>
</template>
  <script>
export default {
  name: "UserInfo",
  data() {
    return {
      isLogin: false,
      isEdit: false,
      loading: true,
      scholarList: [],
      certified: [
        {
          no: 1,
          scholarId: "",
          name: "大帅",
          field: "计算机科学",
          works: 24,
          claimTime: "2022-10-22 14:23",
        },
        {
          no: 2,
          scholarId: "",
          name: "二帅",
          field: "操作系统开发",
          works: 3,
          claimTime: "2022-08-02 09:40",
        },
        {
          no: 3,
          scholarId: "",
          name: "小帅",
          field: "计算机科学",
          works: 4,
          claimTime: "2022-05-20 23:01",
        },
      ],
      pending: [
        {
          no: 1,
          scholarId: "",
          name: "三帅",
          field: "软件开发",
          works: 13,
        },
      ],
    };
  },
  created() {
    this.getInfo();
  },
  methods: {
    to_scholar_profile(row) {
      this.$router.push({ path: `/scholarprofile/${row.id}` });
    },
    deleteRole(no) {
      let s = this.certified[no - 1].name;
      let id = this.certified[no - 1].scholarId;
      this.$confirm("此操作将永久删除 '" + s + "' 门户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          console.log(id);
          //解除id绑定
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    async getInfo() {
      console.log(sessionStorage);
      await this.$axios({
        method: "get",
        url: "/api/getUserPage?userId=" + sessionStorage.userId,
      })
        .then((res) => {
          console.log(res.data);
          this.scholarList = res.data.data.scholarList;
          console.log(this.scholarList);
        })
        .catch((err) => {
          console.log(err);
        });
      await this.getScholar();
      this.loading = false;
    },
    async getScholar() {
      for (let i = 0; i < this.scholarList.length; i++) {
        await this.$axios({
          method: "get",
          url: "/api/getScholarPage?scholarId=" + this.scholarList[i].id,
        })
          .then((res) => {
            console.log(res.data);
            let r = res.data.post.data[0];
            this.scholarList[i].no = i + 1;
            this.scholarList[i].h_index = r.h_index;
            this.scholarList[i].n_pubs = r.n_pubs;
            this.scholarList[i].n_citation = r.n_citation;
            this.scholarList[i].org = r.orgs[0];
            this.scholarList[i].tags = r.tags;
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
  },
};
</script>
<style scoped>
.el-table {
  font-size: 16px;
  margin: 0 0 50px 0;
}
.delete-role {
  color: red;
  cursor: pointer;
}
.scholar-link:hover {
  cursor: pointer;
  color: #3d3daf;
}
.small-title {
  font-weight: 600;
  color: #666666;
  margin: 5px 0 15px 0;
}
.info-wrap {
  padding: 40px 40px 20px 40px;
  box-shadow: #dedede 0px 0px 20px;
}
.page-title {
  margin: 0 0 40px 0;
  font-size: 22px;
  font-weight: 600;
  color: #3d3daf;
}
.container {
  letter-spacing: 1px;
  width: 1000px;
}
</style>